import React, {useState, useRef, useEffect} from 'react'
import {message, Row, Col, Form, Button, Select} from 'antd'
import {PageHeaderWrapper} from '@ant-design/pro-layout'
import {connect} from 'umi'
import {getCredentialItemList, saveOrUpdateCredentialItem} from '../service'
import EditableTagGroup from "@/pages/Credential/TitularConfig/components/EditableTagGroup";

const FormItem = Form.Item;
const formLayout = {
  labelCol: {span: 7},
};

const TitularConfig = () => {

  const [form] = Form.useForm();
  const [profession , setProfession ] = useState([]);
  const [credentialLevel, setCredentialLevel] = useState([]);
  const [jobSeries, setJobSeries] = useState([]);
  const [isRender, setIsRender] = useState(false);

  useEffect(() => {
    getCredentialItemList().then(res =>{
      if (res){
        setJobSeries(res.jobSeries.map(item => item.name));
        setProfession(res.profession.map(item => item.name));
        setCredentialLevel(res.credentialLevel.map(item => item.name));
        setIsRender(true);
      }
    })
  }, []);

  const changeDataList = (values,type) => {
    switch (type) {
      case 'jobSeries':
        setJobSeries(values);
        break;
      case 'profession':
        setProfession(values);
        break;
      case 'credentialLevel':
        setCredentialLevel(values);
        break;
      default:
        console.warn('不存在资质配置类型--'+type);
    }
  };

  const saveConfig = () => {
    let obj = {
      credentialLevel: credentialLevel.filter(item => item!=='').map(item => ({name:item,type:2})),
      jobSeries: jobSeries.filter(item => item!=='').map(item => ({name:item,type:1})),
      profession: profession.filter(item => item!=='').map(item => ({name:item,type:3}))
    };
    saveOrUpdateCredentialItem(obj).then(res => {
      if (res.flag){
        message.success('保存资质配置成功！');
      }else {
        message.error(res.error);
      }
    })
  };

  return (
    <PageHeaderWrapper>
      <Form
      {...formLayout}
      form={form}
      style={{paddingTop: '24px'}}
    >
      <Row gutter={24} style={{padding: '10% 0% 5% 0%', background: '#ffffff'}}>
        <Col span={24} style={{display: 'flex'}}>
          <FormItem label="职称系列：" style={{width: '80%'}} name='jobSeries' validateFirst={true}
                    rules={[{required: true, message: '职称系列不能为空！'}]}>
            <EditableTagGroup
              isRender={isRender}
              dataList={jobSeries}
              changeDataList={changeDataList}
              type='jobSeries'
            />
          </FormItem>
        </Col>
        <Col span={24} style={{display: 'flex'}}>
          <FormItem label="证书级别：" style={{width: '80%'}} name='credentialLevel' validateFirst={true}
                    rules={[{required: true, message: '证书级别不能为空！'}]}>
            <EditableTagGroup
              isRender={isRender}
              dataList={credentialLevel}
              changeDataList={changeDataList}
              type='credentialLevel'
            />
          </FormItem>
        </Col>
        <Col span={24} style={{display: 'flex'}}>
          <FormItem label="专业：" style={{width: '80%'}} name='profession' validateFirst={true}
                    rules={[{required: true, message: '专业不能为空！'}]}>
            <EditableTagGroup
              isRender={isRender}
              dataList={profession}
              changeDataList={changeDataList}
              type='profession'
            />
          </FormItem>
        </Col>
        <Col span={24} style={{textAlign: 'right', marginTop: '50px'}}>
          <Button type='primary' onClick={saveConfig}>保存</Button>
        </Col>
      </Row>
    </Form>
    </PageHeaderWrapper>
  )
};

export default connect(() => ({}))(TitularConfig)
